<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
            width: auto;
            background-color: #c4c4c4;
            font-size: 15px;
            color: #3e4750;
            line-height: 38px;
        }
    </style>
</head>
<body style="margin: 0;">   <!--margin的意思是让将上面的边框边缘的空白去掉-->
    <div class="pg-header">
        <div style="float: left;line-height: 38px;margin-left: 10px">&nbsp收藏本站</div>
        <div style="float: right;">
            <a>登陆</a>
            <a>注册</a>
            <a>我的订单</a>
            <a>我的收藏</a>
            <a>VIP会员俱乐部</a>
            <a>客户服务</a>
            <a>关注</a>
            <a style="margin-right: 20px;">手机版</a>
        </div>
    </div>
    <br/>
    <br/>x
    <br/>
    <br/>
    <br/>
    <div style="width: 300px;border: 1px solid red;">
            <div style="width: 96px;height:96px;border: 1px solid green;float: left"></div>   <!--实际占用宽度为98，还有border-->
            <div style="width: 96px;height:96px;border: 1px solid green;float: left"></div>
            <div style="width: 96px;height:96px;border: 1px solid green ;float: left"></div>
            <div style="width: 96px;height:96px;border: 1px solid green ;float: left"></div>
            <div style="width: 96px;height:96px;border: 1px solid green ;float: left"></div>
            <div style="clear: both"></div>     <!--使父边框也浮动起来把自边框包括-->
    </div>
</body>
</html>